<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Base Sprite</title>
  <style>
    html, document {
      font-size: 32px;
      font-family: 'Arial Black', Gadget, sans-serif;
      /* background: url(http://baidu.com)  #000; */
      flex: 1;
      border: solid 1px;
    }
    group[data-abc] {
      --sprite-anchor: 0.5;
      --sprite-x: 100px;
      --sprite-y: 100;
      font: 12px 'Arial';
      background-color: #07c;
      transform: rotate(30deg) translate(10px, 10px);
      opacity: 0.5;
    }
    .abc {
      --sprite-bgcolor: #f00;
    }
  </style>
</head>
<body>
  <div style="font-size:5vw">abb</div>
  <div style="font-size:2rem">abb测试</div>
  <canvas id="mycanvas" width="1600" height="1600"></canvas>
  <script src="/js/sprite-core.js"></script>
  <script>
    const Label = spritejs.Label;
    const Layer = spritejs.Layer;
    const Group = spritejs.Group;
    const context = document.getElementById('mycanvas').getContext('2d');
    const layer = new Layer({context, renderMode: 'repaintAll', useDocumentCSS: true});

    const s = new Group({
      id: 'abc',
      anchor: 0.5,
      bgcolor: 'red',
      size: [500, 500],
      pos: [300, 300],
      zIndex: 0,
      border: [10, 'blue'],
      color: 'green',
      font: '24px "宋体"',
      textAlign: 'center',
      gradients: {
        bgcolor: {
          vector: [50, 50, 10, 70, 80, 100],
          colors: [{
            offset: 0,
            color: 'rgba(255,0,0,0.5)',
          }, {
            offset: 1,
            color: 'rgba(255,0,0,1)',
          }],
        },
      },
    });
    layer.append(s);
    const gg = new Group();
    s.append(gg);
    
    const s2 = new Label('spritejs redefine canvas api 测试测试测试测试测试');
    s2.attr({
      // font: '5vw "宋体"',
      // font: '24px "宋体"',
      anchor: 0.5,
      bgcolor: 'grey',
      pos: [250, 250],
      width: 200,
      // size: [150, 80],
      // padding: 10,
      // borderRadius: 60,
      // flexible: true,
      lineBreak: 'strict',
      wordBreak: 'normal',
      // wordBreak: 'break-all',
      letterSpacing: 2,
      textIndent: 20,
    });

    const s3 = new Label('测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试.aabb');
    s3.attr({
      anchor: 0.5,
      fillColor: '#000',
      // textAlign: 'right',
      pos: [150, 150],
      width: 280,
      height: 200,
      font: '22px "Arial Black", Gadget, sans-serif',
      lineBreak: 'normal',
      border: [4, '#aaa'],
      textIndent: 20,
    });

    gg.append(s2);
    gg.append(s3);

    // const s4 = s2.cloneNode();
    // layer.append(s4);
  </script>
</body>
</html>